<template>
  <div class="home">
   <!--头部-->
   <header class="home-header">
       <div class="icon-logo logo"><a href="index.html"><span>格莱商城</span></a></div>
       <div class="search">
   	        <input type="search" name="" placeholder="">
       </div>
       <div class="icon-login login"><a href="my.html"><span>用户信息</span></a></div>
   </header>
   <div class="home-container">
   <!--banner-->
   <!--  可以自己写   也可以用插件 比如 百度一下 swiper  -->
<!--   <div class="carousel">
       <div class="banner-box">
           <img src="../assets/img/banner.png"/>
           <img src="../assets/img/banner2.png"/>
           <img src="../assets/img/banner3.png"/>
       </div>
       <ul class="num">
           <li>1</li>
           <li>2</li>
           <li>3</li>
       </ul>
   </div> -->
   
   
     <swiper ref="mySwiper" :options="swiperOptions">
       <swiper-slide v-for="item in banner" :key="item._id">
         <img :src="item.img" alt="">
       </swiper-slide>
 
       <div class="swiper-pagination" slot="pagination"></div>
     </swiper>
   
   
   
   	<!--导航栏-->
   	<nav>
   		<ul>
   			<li class="icon-index"><router-link to="/goodsList?isHot=1">热门</router-link></li>
   			<li class="icon-boutique"><router-link to="/goodsList?isJingxuan=1">精品</router-link></li>
   			<li class="icon-special"><a href="#">专题</a></li>
   			<li class="icon-brand"><a href="#">品牌</a></li>
   		</ul>
   	</nav>
   	<!--正文-->
   	<main>
   		<!--书籍资料-->
   		<div class="products">
   			<div class="hd">
   				<em class="icon-book">书籍资料</em>
   				<span><a href="goods.html">更多 ></a></span>
   			</div>
   			<div class="book-list">
   				<div class="left-list">
   					<a href="detail.html"> <img src="../assets/img/bz01.png"/></a>
   					<span class="book">
   						<a href="#"> <img src="../assets/img/book1.png"/></a>
   						<a href="#"> <img src="../assets/img/book1.png"/></a>
   					</span>
   				</div>
   				<div class="right-list">
   					<a href="#"> <img src="../assets/img/books.png"/></a>
   				</div>
   			</div>
   		</div>
   		<!--数码产品-->
   		<div class="products">
   			<div class="hd">
   				<em class="icon-digital">数码产品</em>
   				<span><a href="goods.html">更多 ></a></span>
   			</div>
   			<div class="digital-list">
   				<div class="left-list">
   					<a href="#"> <img src="../assets/img/pc.png"/></a>
   				</div>
   				<div class="right-list">
   						<a href="#"> <img src="../assets/img/usb.png"/></a>
   						<a href="#"> <img src="../assets/img/card.png"/></a>
   				</div>
   			</div>
   		</div>
   		<p>---- 我是有底线的 ----</p>
   	</main>
   </div>

<!-- 底部 -->
   <xlFooter :act="0"></xlFooter>
  </div>
</template>

<script>
// @ is an alias to /src
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'HomeView',
 components: {
     Swiper,
     SwiperSlide
   },
   directives: {
     swiper: directive
   },
     data() {
         return {
           swiperOptions: {
             pagination: {
               el: '.swiper-pagination'
             },
           },
           banner:[]
         }
       },
       computed: {
         swiper() {
           return this.$refs.mySwiper.$swiper
         }
       },
       mounted() {

         this.get_banner()
       },
       methods:{
        //  获取轮播图
          get_banner(){

             this.$http.get('/api/get_banner')
             .then(res=>{
               console.log(res)
               if(res.code==1){
                  this.banner = res.data;
                   this.swiper.slideTo(3, 1000, false);
               }
               
             })

          }

       }
}
</script>
<style lang="scss">
	@import  '@/assets/css/index.css';

</style>
